define(['jquery','echarts','text!../template/report.html','text!../template/reportTable.html','css!../css/report','common'],function($,echarts,tplReport,tplReportTable){
	let _report = {};
	let time = '';
	let areaId = '';
	let areaType = '';
	let currentType='';
	let areaName = '';
	var tpls = {
		'tplReport' :_.template(tplReport),
		'tplReportTable' :_.template(tplReportTable)
	};

	_report.show = function(){
		time = DateFormat('yyyy-MM');
		$('#contant').html(tpls.tplReport());
		$('.reportType').click(function(event) {
			$('.reportType').removeClass('selected');
			$(this).addClass('selected');
			currentType = $(this).attr('id');
			if(currentType=='reportTable'){
				setTable(time,areaId,areaType,areaName);
			}else{
				setCharts(time,areaId,areaType);
			}
		});
		layui.use('laydate', function(){
		    let laydate = layui.laydate;
		    laydate.render({
		        elem: '#reportDate',
		        type: 'month',
		        btns: ['confirm'],
		        done: function(value, date, endDate){
		        	time = value;
			    }
		    });
		});
		$('#reportSearchButton').click(function(event) {
			if(currentType=='reportTable'){
				setTable(time,areaId,areaType,areaName);
			}else{
				setCharts(time,areaId,areaType);
			}
		});
		let setting = {
	        check: {
	            enable: true,
	            chkStyle: "radio",
	            radioType: 'all',
	        },
	        async: {
	            enable: true,
	            autoParam:["id", "name=n", "level=lv"],
	            otherParam:{"parentId":"320113"},
	            type: "post",
	        },
	        callback:{
	            onCheck:zTreeOnCheck,
	            onClick: function (e, treeId, treeNode, clickFlag) { 
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.checkNode(treeNode, !treeNode.checked, true);
					zTreeOnCheck(e, treeId, treeNode);
				}
	        }
	    };
        setTree("#treeDemo",setting);

        function zTreeOnCheck(event, treeId, treeNode){
	        areaId = treeNode.id;
	        areaType = treeNode.type;
	        $('#reportArea').val(treeNode.name);
	        if (treeNode.name != '栖霞区') {
	        	areaName = treeNode.name;
	        }
	        $("#areaClear").show();
	    }

	    $("#areaClear").click(function(event) {
			areaId = '';
	        areaType = '';
	        areaName = '';
	        $(this).hide();
        	$('#reportArea').val('按管辖区域');
    		setTree("#treeDemo",setting);
		});

	    $('#reportArea').click(function(event) {
		    event.stopPropagation();
			$('.treeBox').toggle();
		});
		$('.treeBox').click(function(event) {
			event.stopPropagation();
		});

		$('body').click(function(event) {
			if($('.treeBox').is(':visible')){
				$('.treeBox').hide();
			}
		});

		$('#exportReport').click(function(event) {
			$('#areaIdForm').val(areaId);
			$('#areaTypeForm').val(areaType);
			$('#timeForm').val(time);
			$('#areaNameForm').val(areaName);
			layer.confirm('确定导出表格？', {
			    btn: ['确定','取消']
			}, function(){
				$('#forms').attr({"action":'/xjrest/report/task_export?areaType='+areaType+'&areaId='+areaId+'&time='+time+'&areaName='+areaName,"method":"get","onsubmit":""}).submit();
			    layer.closeAll();
			}, function(){

			});
		});

		$('.reportType').eq(0).click();
	}

	function setTable(time,areaId,areaType,areaName){
		$('.reportBody').show();
		$('.report-repair-charts').hide();
		Ajax('/xjrest/report/task_report?areaType='+areaType+'&areaId='+areaId+'&time='+time,function(data){
			if(data.ret.success){
				$("#reportYear").html(time.substring(0, 4));
				$("#reportMonth").html(time.substring(5));
				if (areaName != '栖霞区' && areaName != '按管辖区域' && areaName != '') {
					$("#selectArea").html(areaName);
				}
				$('#gridRepairTable').html(tpls.tplReportTable({message:data.ret.value}));
			}
		});
	}

	function setCharts(time,areaId,areaType){
		$('.reportBody').hide();
		$('.report-repair-charts').show();
		Ajax('/xjrest/report/repair_report?areaType='+areaType+'&areaId='+areaId+'&time='+time,function(data){
			if(data.ret.success){
				setRepairNumCharts(data.ret.repairCount);
				areaCountCharts(data.ret.areaCount);
			}
		});
	}

	function setRepairNumCharts(data){
		$("#comRepairNum").html(data.comRepairNum);
		$("#commonNum").html(data.commonNum);
		$("#guestReportNum").html(data.guestReportNum);
		$("#impNum").html(data.impNum);
		$("#otRepairNum").html(data.otRepairNum);
		$("#sqReportNum").html(data.sqReportNum);
		$("#xjReportNum").html(data.xjReportNum);
		let total=data.totalNum;
		let commonNum=data.commonNum==0?0:data.commonNum/total*100;
		let impNum=data.impNum==0?0:data.impNum/total*100;
		let comRepairNum=data.comRepairNum==0?0:data.comRepairNum/total*100;
		let otRepairNum=data.otRepairNum==0?0:data.otRepairNum/total*100;
		let xjReportNum=data.xjReportNum==0?0:data.xjReportNum/total*100;
		let guestReportNum=data.guestReportNum==0?0:data.guestReportNum/total*100;
		let sqReportNum=data.sqReportNum==0?0:data.sqReportNum/total*100;
		let dataStyle = {
		    normal: {
		        label: {show:false},
		        labelLine: {show:false}
		    }
		};
		let placeHolderStyle = {
		    normal : {
		        color: 'rgba(54, 117, 200,0.1)',
		        label: {show:false},
		        labelLine: {show:false}
		    },
		    emphasis : {
		        color: 'rgba(54, 117, 200,0.1)'
		    }
		};
		option = {
		    color:['#548CFF','#FFC525'],
		    series : [
		        {
		            name:'2',
		            type:'pie',
		            radius : [40, 55],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:commonNum, 
		                    name:'已维修'
		                },
		                {
		                    value:100-commonNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        },
		        {
		            name:'3',
		            type:'pie',
		            radius : [20, 35],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:impNum, 
		                    name:'待维修'
		                },
		                {
		                    value:100-impNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        }
		    ]
		};
		option1 = {
		    color:['#4BBAFF','#31E4AA'],
		    series : [
		        {
		            name:'2',
		            type:'pie',
		            radius : [40, 55],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:comRepairNum, 
		                    name:'已维修'
		                },
		                {
		                    value:100-comRepairNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        },
		        {
		            name:'3',
		            type:'pie',
		            radius : [20, 35],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:otRepairNum, 
		                    name:'待维修'
		                },
		                {
		                    value:100-otRepairNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        }
		    ]
		};

		option2 = {
		    color:['#4BBAFF','#548CFF','#FFC525'],
		    series : [
		        {
		            name:'1',
		            type:'pie',
		            radius : [60, 75],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:xjReportNum,
		                    name:'已巡检'
		                },
		                {
		                    value:100-xjReportNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        },
		        {
		            name:'2',
		            type:'pie',
		            radius : [40, 55],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:guestReportNum, 
		                    name:'待巡检'
		                },
		                {
		                    value:100-guestReportNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        },
		        {
		            name:'3',
		            type:'pie',
		            radius : [20, 35],
		            itemStyle : dataStyle,
		            data:[
		                {
		                    value:sqReportNum, 
		                    name:'已超时'
		                },
		                {
		                    value:100-sqReportNum,
		                    name:'invisible',
		                    itemStyle : placeHolderStyle
		                }
		            ]
		        }
		    ]
		};

		let dom = document.getElementById("repairImpBody");
		let dom1 = document.getElementById("repairIntimeBody");
		let dom2 = document.getElementById("userChartsBody");
		let myChart = echarts.init(dom);
		let myChart1 = echarts.init(dom1);
		let myChart2 = echarts.init(dom2);
	    myChart.setOption(option, true);
	    myChart1.setOption(option1, true);
	    myChart2.setOption(option2, true);

	    window.addEventListener("resize", function() { 
		    myChart.resize();
		    myChart1.resize();
		    myChart2.resize();
		});
	}

	function areaCountCharts(data){
		let myChart = echarts.init(document.getElementById('areaCountCharts'));
		let chartData=[];
		data.reverse();
		$.each(data,function(index, el) {
			for(key in el){
				chartData.push({
					'name':key,
					'value':el[key]
				});
			}
		});
		let valueChart=[];
		let valueX=[];
		let backgroundData=[];

		$.each(chartData,function(n,val){
			valueChart.push(val.value);
			valueX.push(val.name);
		})

		$.each(chartData,function(n,val){
			backgroundData.push({'value':Math.max.apply(null, valueChart)+2,'reallyData':val.value});
		})
		var option = {
			grid: {x: "20%",y: "2%", y2:"10%", x2:"5%",borderWidth:0},
			calculable : true,
			tooltip : {
				trigger: 'axis',
				formatter:'{b1}:{c0}',
			},
			xAxis : [
				{
					type : 'value',
					max : Math.max.apply(null, valueChart)+2,
				}
			],
			yAxis : [
				{
					position : 'left',
					type : 'category',
					axisTick : {show: false},
					splitLine: {show:false,},
					splitArea:{show:false,},
					axisLine:{show:false},
					axisLabel: {
						textStyle: {  
							color:"#353535",
							fontSize:"14",
						},
					},
					data : valueX,
				},
				{
					type : 'category',
					axisLine: {show:false},
					axisTick: {show:false},
					axisLabel: {show:false},
					splitArea: {show:false},
					splitLine: {show:false},
					data : valueX,
				}
			],
			series : [
				{
					name:'',
					type:'bar',
					yAxisIndex:1,
					barWidth: 10,
					itemStyle: {
						normal: {
							color:'rgba(54, 117, 200,0.2)',
							borderColor:'rgba(1,252,146,0.2)',
							borderWidth:1,
							barBorderRadius:5
						}
					},
					data:backgroundData,
				},
				{
					z:3,
					name:'各区县分布',
					type:'bar',
					barWidth: 10,
		            stack: 01,
					data:valueChart,
					itemStyle:{
						normal:{
							label : {
								show: false, 
								position: 'right',
							},
			                color: {
			                    type: 'linear',
			                    x: 1,
			                    y: 1,
			                    x2: 0,
			                    y2: 1,
			                    colorStops: [{
			                        offset: 0, color: '#2dd3fd'
			                    }, {
			                        offset: 1, color: '#7a80ff'
			                    }],
			                    globalCoord: false
			                },
							barBorderRadius:5,
						}
					}
				},
			]
		};

	    myChart.setOption(option,true);
	    $(window).resize(function(){
			myChart.resize();
		})
	}

	return _report;
})